const form = (obj) => {
    let template;
    template = `
<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="1200">
    <el-form :model="form" ref="formRef" label-width="120" style="max-width: 1200px" :rules="rules">
      <div class="form-scroll">
        <el-row :gutter="20">
          ${queryParams(obj.sub)}
        </el-row>
      </div>
    </el-form>
    <div>
      <el-button type="primary" @click="onSubmit">{{ isEdit? '编辑': '新增' }}</el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
    // 方法
    import { ref, defineExpose, defineEmits } from 'vue'
    const instance = getCurrentInstance();
    const { proxy } = instance || {};
    const { face_type } = proxy.useDict("face_type")
    import methods from '@/utils/methods.js';
    
    // 接口
    import { add${obj.da}, get${obj.da}, update${obj.da} } from '@/api/${obj.folder}/${obj.xiao}.js'
    
    // 组件
    import imageUpload from '@/components/ImageUpload/index.vue'
    
    // 显示表单
    const dialogFormVisible = ref(false)
    // 弹窗标题
    const title = ref('新增${obj.text}')
    // 是否为编辑
    const isEdit = ref(false)
    // 表单节点
    const formRef = ref(null)
    // 表单
    const form = ref({
      ${getQueryParams(obj.sub)}
    })
    // 验证
    const rules = ref({
      ${getRules(obj.sub)}
    })
    
    const emits = defineEmits(['change'])
    
    // 打开方法
    const open = () => {
      for (let i in form.value) {
        form.value[i] = ''
      }
      dialogFormVisible.value = true
      isEdit.value = false
      title.value = '新增${obj.text}'
    }
    // 编辑
    const edit = (data) => {
      get${obj.da}(data.id).then(res => {
        for (let i in res.data) {
          form.value[i] = data[i]
        }
      })
      isEdit.value = true
      dialogFormVisible.value = true
      title.value = '编辑${obj.text}'
    }
    // 关闭方法
    const close = () => {
      dialogFormVisible.value = false
    }
    
    // 提交
    const onSubmit = async () => {
      await formRef.value.validate((valid, fields) => {
        if (valid) {
          const params = methods.deepClone(form.value)
          if(params.id) {
            update${obj.da}(params).then(res => {
              if(res.code === 200) {
                proxy.$modal.msgSuccess(title.value + '成功');
                close()
                emits('change')
              }
            })
          }else {
            add${obj.da}(params).then(res => {
              if(res.code === 200) {
                proxy.$modal.msgSuccess(title.value + '成功');
                close()
                emits('change')
              }
            })
          }
        }
      })
    }
    
    defineExpose({
      open, close, edit
    })
</script>

<style scoped lang="scss">

</style>`

    return template
}

const resultText = (key = '', comment = '') => {
    if(key.includes('Url')) return '上传'
    if(comment.includes('1')) return '选择'
    return '填写'
}

function queryParams(data) {
    let html = ''
    for(let i of data) {
        if(i['驼峰'] === 'id' || i['驼峰'] === 'userId') continue;
        if(i.comment.includes('更新') || i.comment.includes('创建')) {
            continue;
        }
        if(i['驼峰'].includes('Url')) {
            html += `
          <el-col :span="24">
            <el-form-item label="${i.comment}" :prop="${i['驼峰']}">
              <imageUpload v-model="form.${i['驼峰']}"></imageUpload>
            </el-form-item>
          </el-col>
            `
            continue;
        }
        if(i.comment.includes('1')) {
            html += `
          <el-col :span="12">
            <el-form-item label="${i.comment}" prop="${i['驼峰']}">
                <el-select v-model="form.${i['驼峰']}" placeholder="请${resultText(i['驼峰'], i.comment)}${i.comment}" clearable>
                  <el-option v-for="(item, index) in 1" :label="item" :value="item" :key="index"></el-option>
                </el-select>
            </el-form-item>
          </el-col>`
        }else {
            html += `
          <el-col :span="12">
            <el-form-item label="${i.comment}" prop="${i['驼峰']}">
              <el-input v-model="form.${i['驼峰']}" placeholder="请${resultText(i['驼峰'], i.comment)}${i.comment}" />
            </el-form-item>
          </el-col>`
        }
    }
    return html
}

function getQueryParams(data) {
    let html = ''
    for(let i of data) {
        if(!html) {
            html += `${i['驼峰']}: undefined, // ${i.comment}`
        }else {
            html += `
      ${i['驼峰']}: undefined, // ${i.comment}`
        }
    }
    return html
}

function getRules(data) {
    let html = ''

    for(let i of data) {
        if(i['驼峰'] === 'id') continue;
        if(i.isRequired) {
            if(!html) {
                html += `// ${i.comment}
      ${i['驼峰']}: [
        { required: true, message: '请${resultText(i['驼峰'], i.comment)}${i.comment}', trigger: 'blur' }
      ],`
            }else {
                html += `
      // ${i.comment}
      ${i['驼峰']}: [
        { required: true, message: '请${resultText(i['驼峰'], i.comment)}${i.comment}', trigger: 'blur' }
      ],`
            }
        }
    }
    return html
}

export default form
